<template>
    <div class="home_box">
        <h2>这里是home组件</h2>
        <div class="add_box">
            <input @keydown.enter="onAddText" v-model="itemText" type="text" placeholder="请输入要添加的内容">
            <!--
                vue中的事件修饰符
                .prevent 阻止默认事件
                .stop 阻止事件冒泡
                .capture 触发事件捕获
                .once 只触发一次
                .trim 清空前后空格
                .native 兼容移动端

                //键盘事件修饰符
                .enter 按下回车触发
                .esc ESC键
                ....
            -->
            <button @click="onAddText">添加</button>
        </div>
        <div class="tab_box">
            <ul class="title_list">
                <li v-for="item in appList"
                    :key="item.id"
                    @click="onChangeTab(item.id)"
                    :class="item.active?'active':''">
                    {{ item.title }}
                </li>
            </ul>
            <div class="content_box"
                 v-show="item.active"
                 v-for="item in appList"
                 :key="item.id">
                <h2>正在{{ item.title === "游戏" ? "玩" : "看" }}的{{ item.title }}</h2>
                <ul>
                    <li class="list_item"
                        @dblclick="onChangeItem(index, item.list)"
                        v-for="(i,index) in item.list"
                        :key="index">
                        <span v-show="inputShow !== index">{{ i }}</span>
<!--                        方案二-->
                        <input
                            ref="changeInput"
                            @keydown.enter="onBlur"
                            @blur="onBlur"
                            v-model="item.list[index]"
                            v-if="inputShow === index && curSelectItemId === item.id"
                            type="text">
<!--                        //方案一1-->
<!--                        <input
                            :ref="'changeInput'+item.id+index"
                            @keydown.enter="onBlur"
                            @blur="onBlur"
                            v-model="item.list[index]"
                            v-show="inputShow === index && curSelectItemId === item.id"
                            type="text">-->
                        <span @click="onDeleteItem(index,item.list)" class="delete_btn">删除</span>
                    </li>
                </ul>
            </div>
        </div>
    </div>
</template>

<script>

export default {
    name: 'Home',
    components: {},
    data() {//组件中data为什么是一个函数
        return {
            inputShow: -1,//是否展示input修改框
            curSelectItemId: 0, //当前被选中的item的id
            itemText: "",//要添加的内容
            appList: [
                {
                    id: 0,
                    title: "书籍",
                    active: true,
                    list: [
                        "三国演义",
                        "红楼梦",
                        "水浒传",
                        "西游记"
                    ]
                },
                {
                    id: 1,
                    title: "电影",
                    active: false,
                    list: [
                        "三国演义",
                        "西游记"
                    ]
                },
                {
                    id: 2,
                    title: "游戏",
                    active: false,
                    list: [
                        "英雄联盟",
                        "王者荣耀"
                    ]
                },
                {
                    id: 3,
                    title: "综艺",
                    active: false,
                    list: [
                        "王牌对王牌",
                        "乘风破浪的姐姐"
                    ]
                },
                {
                    id: 4,
                    title: "体育",
                    active: false,
                    list: [
                        "足球",
                        "篮球",
                        "乒乓球"
                    ]
                },
            ]
        }
    },
    methods: {
        //切换选项卡
        onChangeTab(itemID){
            this.curSelectItemId = itemID;
            this.appList.forEach((item)=>{
                //1.首先遍历所有的item,然后把active置空(false);
                //2.找到当前要展示的,然后给当前的item.active置为true
                // if(item.id === itemID){
                //     item.active = true
                // }else {
                //     item.active = false
                // }
                item.active = item.id === itemID
            })
        },
        //添加按钮
        onAddText() {
            console.log("onAddText", this.itemText);
            /*this.appList.forEach((item)=>{
                if(item.active){
                    item.list.push(this.itemText);
                    this.itemText = "";
                }
            })*/

            //去掉当前输入内容的左右空格
            let str = this.itemText.trim();
            //清空原始数据
            this.itemText = "";
            if(!str) return alert("请输入有效信息");
            //去重
            let itemList = this.appList[this.curSelectItemId].list;
            let reFlag = itemList.some((item)=>{
                return item === str;
            });
            if(reFlag) return alert("请勿重复添加")
            itemList.push(str);
        },
        //删除操作
        onDeleteItem(index, list){
            list.splice(index, 1)
        },
        //修改
        onChangeItem(index, list){
            //1.双击触发该事件
            //2.input框出现(定义一个全局的表示input是显示还是隐藏的flag(默认值-1)
            //3.通过当前input的index是否和inputShow相同来控制展示隐藏
            //4.加入控制条件,防止其他选项卡中的input框被触发(curSelectItemId === item.id)
            this.inputShow = index;

            //vue $refs获取(component)DOM元素 原生js获取DOM元素
            //vue 组件传参 父传子 子传父 兄弟组件 vuex $refs[ComponentName].xxx
            //方案一1
            // this.$refs["changeInput"+this.curSelectItemId+index][0].focus();

            //方案二
            //直接打印this.$refs值为空对象,但是在展开之后,里面又有内容, 表明 在执行打印语句的时候$refs确实是为空的,但是在之后的某个阶段又有了内容存在,之所以展开之后能看到,是因为$refs本身就是引用数据类型
            console.log(this.$refs)//

            //$nextTick
            //在下一次执行beforeUpdate的时候 执行回调函数中的内容
            this.$nextTick(_ => {
                console.log(this.$refs)//
                this.$refs.changeInput[0].focus()
            });
        },
        //修改输入框失去焦点onBlur
        onBlur(){
            this.inputShow = -1;
        }
    }
}

</script>
<style>
.home_box {
    margin: 100px auto;
    width: 600px;
    background-color: #eeeeee;
}

.add_box {
    height: 50px;
    line-height: 50px;
    text-align: center;
}

.add_box input {
    width: 200px;
    height: 30px;
}

.add_box button {
    margin-left: 10px;
    width: 50px;
    height: 30px;
}

.tab_box {
    height: 300px;
}

.title_list {
    user-select: none;
    height: 50px;
}

.title_list li {
    float: left;
    width: 80px;
    height: 50px;
    line-height: 50px;
    font-weight: 900;
    text-align: center;
    background-color: green;
    cursor: pointer;
}

.title_list li.active {
    color: #ffffff;
    background-color: blue;
}

.content_box {
    height: 250px;
    border: 2px solid #cccccc;
}

.content_box h2 {
    text-align: center;
}
.list_item{
    position: relative;
    padding: 0 20px;
    height: 30px;
    line-height: 30px;
}
.delete_btn{
    /*display: none;*/
    position: absolute;
    right: 20px;
    cursor: pointer;
    color: #eeeeee;
}
.list_item:hover{
    color: #ffffff;
    background-color: #0000ff;
}
.list_item:hover .delete_btn{
    /*display: inline-block;*/
}
</style>
